<script setup lang="ts">
import { ref, watch } from 'vue';
import { fetchJobInstanceLogs } from '@/service/api';

defineOptions({
  name: 'InstanceLogModal'
});

interface Props {
  instanceId?: number;
}

const props = defineProps<Props>();

const visible = defineModel<boolean>('visible', {
  default: false
});

const loading = ref(false);
const logs = ref('');

async function loadLogs() {
  if (!props.instanceId) return;

  loading.value = true;
  try {
    const { data, error } = await fetchJobInstanceLogs(props.instanceId);
    if (!error && data) {
      logs.value = data;
    }
  } finally {
    loading.value = false;
  }
}

watch(visible, () => {
  if (visible.value) {
    logs.value = '';
    loadLogs();
  }
});
</script>

<template>
  <NModal v-model:show="visible" preset="card" title="执行日志" class="w-800px">
    <NSpin :show="loading">
      <NScrollbar style="max-height: 600px">
        <NCode :code="logs || '暂无日志'" language="text" />
      </NScrollbar>
    </NSpin>
    <template #footer>
      <NSpace justify="end">
        <NButton @click="visible = false">关闭</NButton>
        <NButton type="primary" @click="loadLogs">刷新</NButton>
      </NSpace>
    </template>
  </NModal>
</template>

<style scoped></style>
